<template>
	<view>
		<u-navbar title="分店付款" placeholder autoBack>
			<!-- <view class="flexright xiaohui" slot="right" @click="popshow=true">筛选</view> -->
		</u-navbar>
		<view class="mainpadding">
			<view class="mainpadding ffffff titletext flexcenter" style="font-size: 32rpx;background-color: #ffb800;" >
				<view class="xiaohei" style="font-size: 32rpx;">點數:</view>
				<view class="xiaohei" style="font-size: 32rpx;">{{userInfo.countmoney}}</view>
			</view>
		</view>
		
		<view class="" style="padding-bottom: 150rpx;">
			<view class="flexcenter" v-if="!shop.length">
				<view class="placeholderimage" style="margin-top: 100rpx;" ></view>
			</view>
			<view class="mainpadding_top ffffff flexbetween" v-for="item in shop" :key="item.id" @click="jumpurl('/pages/workbench/fendianfktjxq?id=',item.id)">
				<view class="flexleft">
					<image :src="item.logoimage_text" class="listleftimg2 radius margin_right" mode="">
					</image>
					<view class="">
						<view class="hei_text main_size bold xiankuan">{{item.name}}</view>
						<view class="xiaohong main_size margin_top1 bold xiankuan">未付點數：{{item.nopay_price}}</view>
						<view class="xiaohui margin_top1">綁定時間：{{item.bangdingtime}}</view>
					</view>
				</view>
				<view class="jiechubd" @click.stop="sure(item.id)">立即支付</view>
			</view>
		</view>
		<u-popup round="20" :show="popshow" @close="popshow=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext bold hei_text">篩選</view>
				</view>
				<view class="main_size bold hei_text margin_top">時間</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,item.id)">
						<view :class="currents == item.id? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="main_size bold hei_text margin_top">自定義時間</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="start" placeholder="開始時間">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="main_size bold hei_text">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss=true">
						<input class="itemscreen margin_top" type="text" disabled v-model="end" placeholder="結束時間">
					</view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top" >
					<input type="text" placeholder="選擇商家" disabled="true" class="main_size bold hei_text">
					<u-icon name="arrow-right"  color="#999" size="16"></u-icon>
				</view>
				<view class="flexbetween">
					<view class="resetbtn  huang_text titletext bold flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="init">確認</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="cancel"
			closeOnClickOverlay @close="shows=false"></u-datetime-picker>
		<u-datetime-picker cancelText="取消" confirmText="確認" :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="cancels"
			:minDate="mintime" closeOnClickOverlay @close="showss=false"></u-datetime-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					},
				],
				currents: "",
				start: '',
				end: '',
				popshow:false,
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				shop:[],
				userInfo:null
			}
		},
		onShow() {
			this.get()
			this.getUserInfo()
		},
		methods: {
			sure(id){
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				httpRequest.request('/api/shop/fendianPay','GET',{
					shop_id: uni.getStorageSync("shop_id"),
					id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code == 1){
						this.get()
					}
				})
			},
			async getUserInfo() { //获取店鋪信息
				let res = await this.http.request('/api/shop/Shopdeail', 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
				})
				if (res.code == 1) {
					uni.setStorageSync("appkey", res.data.appkey)
					uni.setStorageSync("hy_type", res.data.hy_type)
					uni.setStorageSync("opentable_status", res.data.opentable_status)
					uni.setStorageSync("is_sdkfp", res.data.is_sdkfp)
					uni.setStorageSync("is_call_sdkfp", res.data.is_call_sdkfp)
					uni.setStorageSync("is_pos_sdkfp", res.data.is_pos_sdkfp)
					uni.setStorageSync("houtel_type",res.data.houtel_type)
					this.userInfo = res.data	
				}
			},
			async get(){
				let res = await this.http.request("/api/shop/fendianlist", "POST", {
					ly:1,
				})
				if (res.code == 1) {
					res.data.forEach(item => {
						item.logoimage = this.imgUrl + item.logoimage
					})
					this.shop= res.data
				} else if (res.code == 0) {
					this.http.toast(res.msg);
				} else {
					this.http.toast('暫無分店');
				}
			},
			jumpurl(url,val){
				uni.navigateTo({
					url:url+val
				})
			},
			resetbtn(){
				this.start = ''
				this.end = ''
				this.currents = ""
				this.popshow = false
				this.init()
			},
			confirm(e) {
				this.shows = false;
				this.show = true;
				this.end = '';
				this.mintime = e.value;
				this.start = httpRequest.returnDate(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = httpRequest.returnDate(e.value);
				this.currents = -1;
			},
			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
		}
	}
</script>

<style scoped lang="scss">
	.jiechubd {
		padding: 15rpx 20rpx;
		background-color: #fff3e6 !important;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #FF8505 !important;
		border: 1rpx solid #FF8505 !important;
	}
	.inputscreenbox {
		width: 40%;
		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333;
			background-color: #f7f9fa;
		}
	}
	.selectboxtop2 {
		width: 100%;
		padding: 12rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		background-color: #f7f9fa;
		border-radius: 50rpx;
		input {
			padding-left: 30rpx;
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
	
</style>
